<!--  -->
<template>
  <div v-show="show">
    <div class="opterationfixed">
      <div class="item" @click.stop="editorPage">
        <div class="i_div"><i class="icon_optf icon_optf1"></i></div>
        <div class="text_opt_notice">页面</div>
      </div>
      <div class="item" @click.stop="editorContainer">
        <div class="i_div"><i class="icon_optf icon_optf2"></i></div>
        <div class="text_opt_notice">主容器</div>
      </div>
      <div class="item" @click.stop="editorContainerPlate">
        <div class="i_div"><i class="icon_optf icon_optf6"></i></div>
        <div class="text_opt_notice">模块</div>
      </div>
      <div class="item" @click.stop="editorThemeTemplate">
        <div class="i_div"><i class="icon_optf icon_optf3"></i></div>
        <div class="text_opt_notice">主题</div>
      </div>
      <div class="item" @click.stop="editorSetMore">
        <div class="i_div"><i class="icon_optf icon_optf4"></i></div>
        <div class="text_opt_notice">设置</div>
      </div>
      <!-- <div class="item" @click.stop="editorAssist">
        <div class="i_div"><i class="icon_optf icon_optf5"></i></div>
        <div class="text_opt_notice">辅助</div>
      </div> -->
    </div>
    <DialogDrawerEditorPage ref="dialogEditorPage" />
    <DialogDrawerAddContainerMainBox ref="dialogAddContainerMainBox" />
    <DialogDrawerEditorThemeTemplate ref="dialogEditorThemeTemplate" />
    <DialogDrawerEditorSetMore ref="dialogEditorSetMore" />
    <DialogEditorAssist ref="dialogEditorAssist" />
    <DialogAddContainerPlate ref="dialogAddContainerPlate" />
  </div>
</template>

<script>
import DialogDrawerEditorPage from '@/components/common/design/dialog/DialogDrawerEditorPage.vue'
import DialogDrawerAddContainerMainBox from '@/components/common/design/dialog/DialogDrawerAddContainerMainBox.vue'
import DialogDrawerEditorThemeTemplate from '@/components/common/design/dialog/DialogDrawerEditorThemeTemplate.vue'
import DialogDrawerEditorSetMore from '@/components/common/design/dialog/DialogDrawerEditorSetMore.vue'
import DialogEditorAssist from '@/components/common/design/dialog/DialogEditorAssist.vue'
import DialogAddContainerPlate from '@/components/common/design/dialog/DialogAddContainerPlate.vue'
import { mapState } from 'vuex'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'

import PubSub from 'pubsub-js'
import * as PubsubType from '@/config/pubsubtype.js'
export default {
  data () {
    return {
      show: false
    }
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    PubSub.subscribe(PubsubType.PUBSUB_DESIGN_EDITOR_PAGE, (event, bool) => {
      this.show = bool
    })
  },
  methods: {
    editorPage () {
      this.$refs['dialogEditorPage'].show()
      this.closeDialog('dialogEditorPage')
    },
    editorContainer () {
      // 是否是自定义页面，如果不是则无法进行添加容器操作！
      if (!BackendjsFunctions.isCustom()) {
        this.$message.error('系统页面无法添加主容器！')
        return
      }
      this.$refs['dialogAddContainerMainBox'].show()
      this.closeDialog('dialogAddContainerMainBox')
    },
    editorThemeTemplate () {
      this.$refs['dialogEditorThemeTemplate'].show()
      this.closeDialog('dialogEditorThemeTemplate')
    },
    editorContainerPlate () {
      // 是否是自定义页面，如果不是则无法进行添加容器操作！
      if (!BackendjsFunctions.isCustom()) {
        this.$message.error('系统页面无法添加排版！')
        return
      }
      this.$refs['dialogAddContainerPlate'].show()
      this.closeDialog('dialogAddContainerPlate')
    },
    editorSetMore () {
      this.$refs['dialogEditorSetMore'].show()
      this.closeDialog('dialogEditorSetMore')
    },
    editorAssist () {
      this.$refs['dialogEditorAssist'].show()
      this.closeDialog('dialogEditorAssist')
    },
    closeDialog (refname) {
      if (refname !== 'dialogEditorPage') {
        this.$refs['dialogEditorPage'].close()
      }
      if (refname !== 'dialogAddContainerMainBox') {
        this.$refs['dialogAddContainerMainBox'].close()
      }
      if (refname !== 'dialogEditorThemeTemplate') {
        this.$refs['dialogEditorThemeTemplate'].close()
      }
      if (refname !== 'dialogEditorSetMore') {
        this.$refs['dialogEditorSetMore'].close()
      }
      if (refname !== 'dialogEditorAssist') {
        this.$refs['dialogEditorAssist'].close()
      }
      if (refname !== 'dialogAddContainerPlate') {
        this.$refs['dialogAddContainerPlate'].close()
      }
    }
  },
  components: {
    DialogDrawerEditorPage,
    DialogDrawerAddContainerMainBox,
    DialogDrawerEditorThemeTemplate,
    DialogDrawerEditorSetMore,
    DialogEditorAssist,
    DialogAddContainerPlate
  }
}

</script>

<style scoped>
.opterationfixed {
  position: fixed;
  left: 60px;
  top: 50%;
  top: 10%\9;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
:root .opterationfixed {
  top: 50%;
}
.opterationfixed .item {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-color: #fff;
  background-image: -webkit-linear-gradient(bottom, #f0f0f0, #ffffff);
  background-image: -moz-linear-gradient(bottom, #f0f0f0, #ffffff);
  background-image: -o-linear-gradient(bottom, #f0f0f0, #ffffff);
  background-image: linear-gradient(to top, #f0f0f0, #ffffff);
  -webkit-box-shadow: 0 1px 4px #fff inset, 0 4px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 24px #fff inset, 0 4px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 4px #fff inset, 0 4px 10px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  display: flex;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.opterationfixed .item:hover {
  background: #258ffb;
  width: 120px;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.opterationfixed .item .icon_optf {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: url(~@/assets/images/icon1.png) no-repeat;
}
.opterationfixed .item:hover .icon_optf {
  background-image: url(~@/assets/images/icon1_hover.png);
}
.opterationfixed .item .icon_optf1 {
  background-position: 0 0;
}
.opterationfixed .item .icon_optf2 {
  background-position: 0 -250px;
}
.opterationfixed .item .icon_optf3 {
  background-position: 0 -100px;
}
.opterationfixed .item .icon_optf4 {
  background-position: 0 -150px;
}
.opterationfixed .item .icon_optf5 {
  background-position: 0 -200px;
}
.opterationfixed .item .icon_optf6 {
  background-position: 0 -50px;
}
.opterationfixed .item .text_opt_notice {
  display: none;
  line-height: 50px;
  padding: 0 20px 0 5px;
  color: #fff;
  font-size: 16px;
}
.opterationfixed .item:hover .text_opt_notice {
  display: block;
}
</style>
